<template>
    <div v-loading.fullscreen.lock="fullscreenLoading">
        <div id="yearChart" style="height: 300px;width: 100%;"></div>
        <div style="display: flex;justify-content: space-between">
            <div style="width: 50%;">
                <div id="scatterChart" style="height: 500px;"></div>
                <div style="display: flex;margin-top: 5px">
                    <el-pagination
                            :background="true"
                            layout="prev, pager, next,sizes,total"
                            :total="total"
                            :current-page="page"
                            :page-size="size"
                            :page-sizes="[5,10,15,20]"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
            <div style="width: 50%;">
                <div id="sumTimeChart" style="height: 500px;"></div>
                <div style="display: flex;justify-content: flex-end">
                    <el-pagination
                            :background="true"
                            layout="total,sizes,prev, pager, next"
                            :total="stTotal"
                            :current-page="stPage"
                            :page-size="stSize"
                            :page-sizes="[5,10,15,20]"
                            @size-change="handleSumTimeSizeChange"
                            @current-change="handleSumTimeCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
    import echarts from 'echarts'
    import chart from "../charts/line";
    import resize from "../charts/mixins/resize";

    export default {
        mixins: [resize],
        name: "RecordDetails",
        components: {
            chart
        },
        data() {
            return {
                scatterChart: null,
                yearChart: null,
                sumTimeChart: null,
                scatterData: [],
                yearData: [],
                sumTimeData: [],
                page: 1,
                total: 0,
                size: 5,
                stPage: 1,
                stTotal: 0,
                stSize: 5,
                fullscreenLoading: false
            }
        },
        mounted() {
            this.initCharts()
        },
        methods: {
            initCharts() {
                this.fullscreenLoading = true;
                this.initSumTimeChart()
                this.initYearChart()
                this.initScatterChart()
            },
            initScatterChart() {
                let date = this.formatDate()
                this.getRequest('/clock/records/commute/?day=' + date + '&page=' + this.page + '&size=' + this.size).then(resp => {
                    if (resp) {
                        let t = ['姓名', '上班时间', '下班时间']
                        let t1 = ['bound', date + ' 07:00:00', date + ' 23:00:00']
                        this.scatterData = resp.data
                        this.total = resp.total
                        this.scatterData.splice(0, 0, t1)
                        this.scatterData.splice(0, 0, t)
                        // console.log(this.scatterData)
                        this.scatterChart = echarts.init(document.getElementById("scatterChart"))
                        let option2 = {
                            title: {
                                text: '当天打卡时间散点图',
                                textStyle: {
                                    fontWeight: 'normal',
                                    fontSize: 14,
                                    color: '#F1F1F3'
                                },
                                left: '1%'
                            },
                            backgroundColor: 'rgba(7,6,6,0.91)',
                            legend: {
                                textStyle: {
                                    fontSize: 12,
                                    color: '#F1F1F3'
                                },
                                // top: 20,
                            },
                            tooltip: {},
                            dataset: {
                                // 提供一份数据。
                                source: this.scatterData,
                                sourceHeader: true

                            },
                            // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
                            xAxis: {
                                type: 'time',
                                axisLine: {
                                    lineStyle: {
                                        color: '#57617B'
                                    },
                                },
                                axisLabel: {
                                    margin: 10,
                                    textStyle: {
                                        fontSize: 13
                                    }
                                },
                                boundaryGap: false,
                                splitLine: {
                                    show: true,
                                    lineStyle: {
                                        color: '#999',
                                        type: 'dashed'
                                    }
                                },
                                // maxInterval:3600*24*1000,
                                // interval:3600000,
                                // data:[1800000,3600*24*1000]
                            },
                            // 声明一个 Y 轴，数值轴。
                            yAxis: {
                                type: 'category',
                                axisLine: {
                                    lineStyle: {
                                        color: '#57617B'
                                    },
                                },
                                axisLabel: {
                                    margin: 20,
                                    textStyle: {
                                        fontSize: 14
                                    }
                                },
                                boundaryGap: false,
                                splitLine: {
                                    show: true,
                                    lineStyle: {
                                        color: '#999',
                                        type: 'dashed'
                                    }
                                },
                            },
                            // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
                            grid: {
                                left: '2%',
                                right: '5%',
                                bottom: '2%',
                                containLabel: true
                            },
                            series: [
                                {
                                    type: 'scatter',
                                    itemStyle: {
                                        normal: {
                                            color: 'rgb(137,189,27)',
                                            borderColor: 'rgba(137,189,2,0.27)',
                                            borderWidth: 12

                                        }
                                    },
                                },
                                {
                                    type: 'scatter',
                                    itemStyle: {
                                        normal: {
                                            color: 'rgb(189,47,47)',
                                            borderColor: 'rgba(249,82,117,0.49)',
                                            borderWidth: 12

                                        }
                                    },
                                },
                            ]
                        }
                        this.scatterChart.setOption(
                            option2
                        )
                        this.fullscreenLoading = false
                    }
                })
            },
            initYearChart() {
                if (window.sessionStorage.getItem("yearData")) {
                    this.yearData=JSON.parse(window.sessionStorage.getItem("yearData"))
                    this.showYearChart()
                } else {
                    this.getRequest('/clock/records/year/?userId=' + JSON.parse(window.sessionStorage.getItem("user")).id).then(resp => {
                        if (resp) {
                            this.yearData = resp.map(item => {
                                return [item.dt, item.sumtime, item.returnTime]
                            })
                            window.sessionStorage.setItem("yearData", JSON.stringify(this.yearData))
                            this.showYearChart()
                        }
                    })
                }
            },
            showYearChart() {
                let option1 = {
                    backgroundColor: 'rgba(7,6,6,0.91)',
                    title: {
                        top: 10,
                        text: new Date().getFullYear() + '年每天的打卡时长',
                        left: 'center',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (param) {
                            return param.data[0] + " 打卡时长：" + param.data[2]
                        }
                    },
                    legend: {
                        top: '10',
                        left: '100',
                        data: ['个人打卡时长', 'Top 12'],
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    calendar: [{
                        monthLabel: {
                            color: '#fff'
                        },
                        top: 80,
                        left: 80,
                        bottom: 40,
                        right: 40,
                        range: [new Date().getFullYear()+'-01-01', new Date().getFullYear()+'-12-31'],
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#000',
                                width: 4,
                                type: 'solid'
                            }
                        },
                        yearLabel: {
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        itemStyle: {
                            color: '#323c48',
                            borderWidth: 1,
                            borderColor: '#111'
                        }
                    }],

                    series: [
                        {
                            name: '个人打卡时长',
                            type: 'scatter',
                            coordinateSystem: 'calendar',
                            data: this.yearData,
                            // tooltip:{
                            //     formatter:function (param) {
                            //         return param.data[2]
                            //     }
                            // },
                            symbolSize: function (val) {
                                return val[1] / (1000 * 60 * 60);
                            },
                            itemStyle: {
                                color: '#ddb926'
                            }
                        },
                        {
                            name: 'Top 12',
                            type: 'effectScatter',
                            coordinateSystem: 'calendar',
                            calendarIndex: 0,
                            data: this.yearData.sort(function (a, b) {
                                return b[1] - a[1];
                            }).slice(0, 12),
                            symbolSize: function (val) {
                                return val[1] / (1000 * 3600);
                            },
                            // tooltip:{
                            //     formatter:function (param) {
                            //         return param.data[2]
                            //     }
                            // },
                            showEffectOn: 'render',
                            rippleEffect: {
                                brushType: 'stroke'
                            },
                            hoverAnimation: true,
                            itemStyle: {
                                color: '#f4e925',
                                shadowBlur: 10,
                                shadowColor: '#333'
                            },
                            zlevel: 1
                        },
                    ]
                }
                this.yearChart = echarts.init(document.getElementById("yearChart"))
                this.yearChart.setOption(option1)
                this.fullscreenLoading=false
            },
            handleCurrentChange(val) {
                this.page = val
                this.initScatterChart()
            },
            handleSizeChange(val) {
                this.size = val
                this.page = 1
                this.initScatterChart()
            },
            formatDate() {
                let date = new Date()
                let year = date.getFullYear()
                let month = date.getMonth() + 1
                let day = date.getDate()
                if (month < 10) {
                    month = "0" + month
                }
                if (day < 10) {
                    day = "0" + day;
                }
                return year + "-" + month + "-" + day
            },
            initSumTimeChart() {
                this.getRequest('/clock/records/ym?page=' + this.stPage + '&size=' + this.stSize).then(resp => {
                    if (resp) {
                        // console.log(resp)
                        this.stTotal = resp.total
                        this.sumTimeData = resp.data
                        let option = {
                            backgroundColor: 'rgba(7,6,6,0.91)',
                            title: {
                                text: '所有打卡时长统计',
                                textStyle: {
                                    fontWeight: 'normal',
                                    color: '#f1f2f3',
                                    fontSize: 14,
                                }
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'shadow'
                                },
                                formatter: function (ps) {
                                    let s = ps[0].data.name + "<br />"
                                    for (let p in ps) {
                                        if (ps[p].seriesName === '总时长') {
                                            s += '总时长：' + ps[p].data.totalSumTime + "<br />"
                                        }
                                        if (ps[p].seriesName === '年') {
                                            s += '年时长：' + ps[p].data.yearSumTime + "<br />"
                                        }
                                        if (ps[p].seriesName === '月') {
                                            s += '月时长：' + ps[p].data.monthSumTime + "<br />"
                                        }
                                    }
                                    return s;
                                }
                            },
                            legend: {
                                data: ['总时长', '年', '月'],
                                textStyle: {
                                    fontWeight: 'normal',
                                    color: '#f1f2f3',
                                    fontSize: 14,
                                }
                            },
                            grid: {
                                left: 100
                            },
                            toolbox: {
                                show: true,
                                // feature: {
                                //     saveAsImage: {}
                                // }
                            },
                            xAxis: {
                                type: 'value',
                                name: '时长',
                                axisLabel: {
                                    formatter: function (param) {
                                        return ""
                                    },
                                    color: '#57617B'
                                }
                            },
                            yAxis: {
                                type: 'category',
                                inverse: true,
                                axisLabel: {
                                    formatter: function (value) {
                                        if (value.length > 5) {
                                            return value.substring(0, 3)
                                        }
                                        return value;
                                    },
                                    margin: 20,
                                    rich: {
                                        value: {
                                            lineHeight: 30,
                                            align: 'center'
                                        },
                                    },
                                    color: '#57617B'
                                }
                            },
                            dataset: {
                                source: this.sumTimeData
                            },
                            series: [
                                {
                                    name: '总时长',
                                    type: 'bar',
                                    encode: {
                                        x: "receivedTotal"
                                    },
                                    itemStyle: {
                                        color: 'rgba(178,34,34,0.8)'
                                    }
                                },
                                {
                                    name: '年',
                                    type: 'bar',
                                    encode: {
                                        x: "receivedYear",
                                        y: "name"
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: 'rgba(34,139,34,0.8)',
                                        }
                                    }
                                },
                                {
                                    name: '月',
                                    type: 'bar',
                                    encode: {
                                        x: "receivedMonth"
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: 'rgba(0,191,255,0.8)',
                                        }
                                    }
                                },
                            ]
                        };
                        this.sumTimeChart = echarts.init(document.getElementById("sumTimeChart"))
                        this.sumTimeChart.setOption(option)
                        this.fullscreenLoading=false
                    }
                })
            },
            handleSumTimeCurrentChange(val) {
                this.stPage = val
                this.initSumTimeChart()
            },
            handleSumTimeSizeChange(val) {
                this.stSize = val
                this.stPage = 1
                this.initSumTimeChart()
            },
        },
        beforeDestroy() {
            if (!this.yearChart) {
                return
            }
            this.yearChart.dispose()
            this.yearChart = null
            if (!this.scatterChart) {
                return
            }
            this.scatterChart.dispose()
            this.scatterChart = null
            if (!this.sumTimeChart) {
                return
            }
            this.sumTimeChart.dispose()
            this.sumTimeChart = null
        },
    }
</script>


<style>

</style>